<template>
	<view>
		<view :style="`height:${data.show?data.sysHeight+'px':'0px'}`" class="mask" @tap="hide" ref="mask"></view>
		<view class="container" v-if="props.isTouch"
			:style="`height:${data.scHeught}px;bottom:${data.bottom}px;transition:${data.bottom==0||data.bottom== -(data.scHeught-60) || data.bottom == -30?' bottom .3s':''};`"
			@touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">
			<slot></slot>
		</view>
	</view>
</template>
<script setup>
	import {
		onMounted,
		reactive,
		watch
	} from "vue";
	var touch = 0
	var startY = 0
	var pageY = 0
	var downVal = 0
	var upVal = 0
	const data = reactive({
		scHeught: uni.$u.sys().windowHeight * 0.9,
		show: false,
		sysHeight: uni.$u.sys().windowHeight,
		bottom: -((uni.$u.sys().windowHeight * 0.9) - 60)
	})
	const props = defineProps({
		isTouch: Boolean,
		bottom: Number,
		isRefresh: Boolean,
	})
	console.log(props.isTouch);
	const emit = defineEmits(['isShow'])
	onMounted(() => {
		data.bottom = props.bottom ||  -((uni.$u.sys().windowHeight * 0.9) - 60)
	})
	watch(() => [data.bottom, data.show], (nv) => {
		if (nv[0] == -(data.scHeught - 60)) {
			data.show = false
		} else {
			data.show = true
		}
		emit('isShow', data.show)
	}, {
		immediate: true
	})
	const touchStart = (e) => {
		touch = e.touches[0] || e.changedTouches[0]
		startY = touch.pageY
	}

	const touchMove = (e) => {
		// if (data.bottom <= -(data.scHeught - 60)) return data.bottom = -(data.scHeught - 60)
		touch = e.touches[0] || e.changedTouches[0]
		pageY = touch.pageY
		// 微信小程序多预留30
		// #ifdef MP-WEIXIN
		upVal = pageY - 90 < 30 ? -30 : -(pageY - 90)
		// #endif
		// #ifndef MP-WEIXIN
		upVal = pageY - 60 < 0 ? 0 : -(pageY - 60)
		// #endif
		downVal = pageY - startY < 0 ? 0 : -(pageY - startY)
		if (startY > 180 && startY < 700) return
		if (downVal != 0) {
			if (upVal <= -(data.scHeught - 60)) return data.bottom = upVal
			data.bottom = downVal
		} else {
			// #ifdef MP-WEIXIN
			if (data.bottom == -30) return
			// #endif
			// #ifndef MP-WEIXIN
			if (data.bottom == 0) return
			// #endif
			data.bottom = upVal
		}
	}

	const touchEnd = (e) => {
		if (props.isRefresh) return
		// 未展开时 点击展开
		if (data.bottom == -(data.scHeught - 60)) {
			// #ifndef MP-WEIXIN
			data.bottom = 0
			// #endif
			// #ifdef MP-WEIXIN
			data.bottom = -30
			// #endif
			return
		}
		// 弹窗未展开时不能下滑
		if (data.bottom <= -(data.scHeught - 60)) return data.bottom = -(data.scHeught - 60)
		// downVal为0时 代表向上滑 反则向下滑
		if (downVal == 0) {
			if (upVal > -600) {
				// #ifdef MP-WEIXIN
				data.bottom = -30
				// #endif
				// #ifndef MP-WEIXIN
				data.bottom = 0
				// #endif
				data.show = true
			} else {
				data.bottom = -(data.scHeught - 60)
			}
		} else {
			// #ifdef MP-WEIXIN
			if (downVal < -70) {
				data.bottom = -(data.scHeught - 60)
			} else {
				data.bottom = -30
			}
			// #endif
			// #ifndef MP-WEIXIN
			if (downVal < -100) {
				data.bottom = -(data.scHeught - 60)
			} else {
				data.bottom = 0
			}
			// #endif
		}
	}
	const hide = () => {
		// 点击遮罩层 关闭展开状态
		data.bottom = -(data.scHeught - 60)
	}
</script>

<style scoped lang="scss">
	.mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 750rpx;
		z-index: 9999;
		background-color: rgba(0, 0, 0, .5);
		opacity: 1;
		/* #cbcbcb7f; */
	}

	.content {
		width: 750rpx;
		height: auto;
		padding: 24rpx 24rpx;
		position: relative;
	}

	.container {
		width: 750rpx;
		background-color: #fff;
		position: fixed;
		left: 0;
		z-index: 999999;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
		border: 1px solid #bbb;
		box-shadow: 0px 0px 7rpx 0px rgba(0, 0, 0, 0.4);
	}
</style>